<template>
  <div class="record_box">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoadSearch(false)"
    >
      <van-steps direction="vertical" :active="0" inactive-icon = 'checked'>
        <van-step v-for="(item,index) in ticketLogs_list" :key='index' v-if="item.type != 'none'">
          <!--item.intervene_type_id == 5  判断当前流程操作是不是评论 -->
          <div v-if="item.intervene_type_id == 5">
            <div v-if="item.suggestion && item.type == 'read'" class="comment_user">  <!--判断是否是hook添加评论还是人为添加评论 -->  
              <span class="name" @click="skipTo(item.participant)">{{item.participant_info.participant_alias}}&nbsp;&nbsp;&nbsp;</span><span class="icon-image iconfont icon-yiyue-copy"></span>
              <span class="time">{{item.gmt_created}}</span>
            </div>
            <div v-else class="comment_user">
              <span class="name" @click="skipTo(item.participant)">{{item.participant_info.participant_alias}}&nbsp;</span>添加了评论
              <span class="time">{{item.gmt_created}}</span>
            </div>

            <div class="suggestion_box" v-if="item.type == 'comment' ">
              “
              <span 
                v-for="(val,j) in item.users"
                :key="j"
                @click="skipTo(val.username)"
              >
                @{{val.alias}}
              </span>
              {{item.textarea_value}}
              ”
              <div class="commentImg_box" v-if="item.urlList.length > 0">
                <van-image
                  v-for="(val,j) in item.urlList"
                  :key="j"
                  width="2.35rem"
                  height="2.35rem"
                  fit="cover"
                  :src="val + '?imageMogr2/thumbnail/200x/interlace/1|imageMogr2/gravity/center/crop/200x200'"
                  @click="previewImg(item.urlList,j)"
                />
              </div>
            </div>
            <div class="suggestion_img">
              <div class="round"></div>
            </div>
          </div>
        
          <!--hook操作 -->
          <div  v-else-if="item.intervene_type_id == 9" >
            
          </div>
          <!-- 其他操作 -->
          <div v-else>
            <div  v-if="item.type != 'cc'">
              <div class="state">
                {{item.state.state_name}}
                <span class="time">{{item.gmt_created}}</span>
              </div>

              <div>
                <p class="participant">{{item.participant_info.participant_alias}}&nbsp;
                  （ {{item.transition.transition_name}} )
                </p>
              </div>
              
              <div class="suggestion_box" v-if="item.type == 'comment' && item.textarea_value ">
                “
                <span 
                  v-for="(val,j) in item.users"
                  :key="j"
                  @click="skipTo(val.username)"
                >
                  @{{val.alias}}
                </span>
                {{item.textarea_value}}
                ”
                <div class="commentImg_box" v-if="item.urlList.length > 0">
                  <van-image
                    v-for="(val,j) in item.urlList"
                    :key="j"
                    width="2.35rem"
                    height="2.35rem"
                    fit="cover"
                    :src="val + '?imageMogr2/thumbnail/200x/interlace/1|imageMogr2/gravity/center/crop/200x200'"
                    @click="previewImg(item.urlList,j)"
                  />
                </div>
              </div>

              <div class="img_box" @click="skipTo(item.participant)">
                <div>  
                  <div class="image" v-show="!item.participant_info.participant_email">
                    {{item.participant_info.participant_alias.substring(item.participant_info.participant_alias.length-2)}}
                  </div>
                  <van-image
                    v-show="item.participant_info.participant_email"
                    round
                    width="1.1rem"
                    height="1.1rem"
                    fit="cover"
                    lazy-load
                    :src="item.participant_info.participant_email" 
                    />
                </div>

                <div class="right_icon">
                  <span v-if="item.intervene_type_id == 1" class="icon-image iconfont icon-zhuanjiao1"></span>
                  <span v-else class="icon-image iconfont icon-duigou"></span>
                </div>
              </div>
            </div>

            
            <div v-if="item.type == 'cc' ">
              <div class="state">
                {{item.state.state_name}}
                <span class="time">{{item.gmt_created}}</span>
              </div>

              <div>
                <p class="participant">
                  已抄送{{item.users.length}}人
                </p>
              </div>
              
              <div class="suggestion_box">  
                <div class="cc_box">
                  <div 
                    v-for="(val,j) in item.users"
                    :key="j"
                  >
                    <div class="usersImg" v-show="!val.email">
                      {{val.alias.substring(val.alias.length-2)}}
                    </div>
                    <van-image
                      v-show="val.email"
                      round
                      width="0.8rem"
                      height="0.8rem"
                      fit="cover"
                      lazy-load
                      :src="val.email"
                      />
                      <p>{{val.alias}}</p>
                  </div>
                </div>
              </div>

              <div class="img_box">
                <div>
                  <div class="image">
                    <van-icon name="volume" />
                  </div>
                </div>
                <div class="right_icon">
                  <span class="icon-image iconfont icon-duigou"></span>
                </div>
              </div>
            </div>
          </div>
          
        </van-step>
      </van-steps>
    </van-list>
  </div>
</template>

<script>
import moment from 'moment'
import { ImagePreview } from 'vant';
export default {
  watch:{},
  data () {
    return {
      ticketLogs_list:[],//工单操作步骤
      loading:false,
      finished:false,
      page:1,
    }
  },
  created(){
    
  },
  methods:{
    onLoadSearch(is_onLoad){
      if(is_onLoad){
        this.ticketLogs_list = []
        this.page = 1
      }
      let data = {
        id:this.$route.query.ticket_id,
        page:this.page,
      }
      this.loading = true
      this.$store.dispatch('api_get_ticket_flowlogs',data).then(res=>{
        res.data.data.value.forEach((item,index)=>{
          item.gmt_created = moment(item.gmt_created).format('MM-DD hh:mm')
          this.ticketLogs_list.push(item)
        })
        this.loading = false
        this.page++
        if(this.ticketLogs_list.length >= res.data.data.total){
          this.finished = true
        }
        this.handleData() //处理suggestion数据
      })
    },
    handleData(){
      this.ticketLogs_list.forEach((item,index) => {
        item.textarea_value = ''
        item.urlList = []
        item.users = []
        item.type = 'comment'
        if(item.suggestion){
          try {
            let suggestion = JSON.parse(item.suggestion)
            item.textarea_value = suggestion.textarea_value
            item.urlList = suggestion.urlList
            item.users = suggestion.users
            item.type = suggestion.type
          } catch(e) {
            item.textarea_value = item.suggestion
          }
        }
        if(item.suggestion == "定时器流转" && item.participant == "loonrobot"){
          item.type = "none"
        }
      });
    },
    previewImg(urlList,j){
      ImagePreview({
        images: urlList,
        startPosition: j,
        closeOnPopstate:true,
      });
    },
    skipTo(userId){
      this.$parent.skipToPersonal(userId)
    }
  }
}
</script>

<style lang='less' scoped>
*{
  box-sizing: border-box;
}
.record_box{
  margin: 10px 0 0px 0;
  padding: 0.3rem 0.3rem 0 0.3rem;
  background: #fff;
  .van-list{
    background: #f6f6f6;
    /deep/.van-list__finished-text{
      position: absolute;
      left: 0;
      right: 0;
    }
    /deep/.van-list__loading{
      position: absolute;
      left: 0;
      right: 0;
    }
  }
  .van-steps{
    padding-left: 0.96rem;
  }
  .van-step{
    min-height: 2.04rem;
    padding-left: 0.5333rem;
    padding-bottom: 0.5333rem;
    .state,.comment_user{
      line-height: 0.6667rem;
      font-size: 14px;
      color:#000;
      .name{
        color:rgb(15, 131, 185);
      }
      .time{
        color:#B7B5B5;
        font-size: 12px;
        float: right;
      }
      .icon-yiyue-copy{
        color: #D6B480;
        font-size:32px;
      }
    }
    .suggestion_box{
      line-height: 22px;
      color: #969799;
      font-size: 14px;
      span{
        color:#58f;
      }
      .commentImg_box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        .van-image{
          margin-top:  0.16rem;
          display: flex;
          justify-content: flex-start;
          margin-right: 0.16rem;
        }
      }
      .cc_box{
        margin-top: 0.2667rem;
        display: flex;
        flex-wrap:wrap;
        text-align: center;
        >div{
          margin-right: 0.2667rem;
          p{
            margin:0;
            font-size: 12px;
          }
          .van-image{
            vertical-align: top;
          }
          .usersImg{
            width: 0.8rem;
            height:0.8rem;
            background-color: rgb(58, 148, 250);
            color: #fff;
            text-align: center;
            margin:0 auto;
            line-height: 0.8rem;
            overflow: hidden;
            border-radius: 50%;
            font-size: 12px;
          }
        }
      }
    }
    .participant,{
      color:#B7B5B5 !important;
      line-height: 0.6667rem;
      margin: 0;
      font-size: 13px;
    }
    >:nth-child(2){
      display: none;
    }
    >:nth-child(3){
      left:-0.4rem;
    }
    .img_box{
      position: absolute;
      top:0.2667rem;
      left:-0.96rem;
      z-index: 1;
      height: 1.1rem;
      .image{
        width: 1.1rem;
        height: 1.1rem;
        background-color: rgb(58, 148, 250);
        color: #fff;
        text-align: center;
        line-height: 1.1rem;
        overflow: hidden;
        border-radius: 50%;
        font-size: 14px;
        .van-icon{
          font-size: 22px;
          line-height: 1.1rem;
        }
      }
      .right_icon{
        width: 0.4533rem;
        height:0.4533rem;
        text-align: center;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        bottom:-0.1333rem;
        left:0.7467rem;
        z-index: 99;
        text-align: center;
        color:#07c160;
        display: flex;
        align-items:center;   
        justify-content: center; 
        span{
          width: 0.32rem;
          height: 0.32rem;
          font-size: 12px;
          line-height: 0.3467rem;
          border-radius: 50%;
          overflow: hidden;
        }
      }
    }
    .suggestion_img{
      position: absolute;
      top:0.2667rem;
      left:-0.72rem;
      z-index: 1;
      .round{
        width: 0.65rem;
        height: 0.65rem;
        border-radius: 50%;
        border:4px solid #fff;
        background: #E6E6E6;
      }
    }
  }
  .van-step--vertical:not(:last-child)::after{
    border:none;
  }
}
</style>
